<template>
    <div v-if="tags.length > 0" class="w-full p-5 mb-3 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-100 dark:border-gray-300">
        <!-- 分类标题 -->
        <div class="flex items-center">
            
           
                <svg t="1763031179557" class="icon   w-5 h-5 mr-2 mb-3
             dark:text-white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1656" width="300" height="300"><path d="M448 853.333333L170.666667 576 576 170.666667H853.333333v277.333333L448 853.333333z m0-59.733333l362.666667-362.666667V213.333333h-217.6l-362.666667 362.666667 217.6 217.6zM682.666667 298.666667c25.6 0 42.666667 17.066667 42.666666 42.666666s-17.066667 42.666667-42.666666 42.666667-42.666667-17.066667-42.666667-42.666667 17.066667-42.666667 42.666667-42.666666z" fill="#444444" p-id="1657"></path></svg>
            <h2 class="mb-3 font-bold text-gray-900 uppercase ">标签</h2>
        </div>
        <!-- 标签标题 -->
        
        <!-- 标签列表 -->
        <span v-for="(tag, index) in tags" :key="index" @click="goTagArticleListPage(tag.id, tag.name)"
            class="inline-block mb-1 cursor-pointer bg-green-200 text-blue-500 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-blue-500 hover:text-green-900 dark:bg-blue-150 dark:text-gray-800">
            {{ tag.name }}
        </span>
    </div>
</template>

<script setup>
import { getTagList } from '@/api/frontend/tag'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 所有标签
const tags = ref([])
getTagList().then((res) => {
    if (res.success) {
        tags.value = res.data
    }
})
// 跳转标签文章列表页
const goTagArticleListPage = (id, name) => {
    // 跳转时通过 query 携带参数（标签 ID、标签名称）
    router.push({path: '/tag/article/list', query: {id, name}})
}
</script>

